<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 指令是vue封装的一种特殊的标签属性 -->
    <!-- v-开头 -->
    <!-- v-xxx="值或表达式" -->
    <!-- v-html会解析标签，v-text不会解析标签 -->
    <div id="app">
      <div v-html="content"></div>
      <!-- v-text不能解析标签 -->
      <div v-text="content"></div>
      <!-- v-if 创建和销毁 -->
      <h1 v-if="age>18">老年人</h1>
      <h1 v-else>未成年人</h1>
      <!-- v-show显示和隐藏 会加一个属性 display:none -->
      <h1 v-show="age>18">老年人</h1>
      <h1 v-show="age<18">年轻人</h1>
    </div>

    <!-- 引入vue -->
    <script src="./vue.js"></script>
    <script>
      //js中声明变量的方式
      //es6: let const
      //ES5: var
      new Vue({
        el: "#app",
        data: {
          content: "<span>123</span>",
          age: 20,
        },
      });
    </script>
  </body>
</html>
